<script setup>
	import {
		onBeforeMount,
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onPageScroll
	} from "@dcloudio/uni-app"
	const name = ref("张三")
	const age = ref(18)
	const scroll = ref(null)
	const count = ref(0)
	const fiexd = ref(false)
	onLoad((e) => {
		name.value = "李四";
		console.log("onload函数")
		console.log(e)
		name.value = e.name
		age.value = e.age
	})
	onReady((e) => {
		console.log("onReady函数")
	})
	onShow(() => {
		console.log("onShow函数")
		time = setInterval(() => {
			count.value++;
		}, 50)
	})
	onHide(() => {
		console.log("onHide函数")
		clearInterval(time)
	})
	onMounted(() => {
		console.log("onMounted函数")
	})
	onBeforeMount(() => {
		console.log("onBeforeMount函数")
	})
	onUnload(() => {
		console.log("onUnload卸载页面")
	})
	onPageScroll((e) => {
		console.log(e.scrollTop)


		// if (e.scrollTop > 200) {
		// 	fiexd.value = true
		// }else{
		// 	fiexd.value = false
		// }

		//简化
		fiexd.value = e.scrollTop > 200
	})
	let time = setInterval(() => {
		count.value++;
	}, 50)
</script>
<template>
	<view class="">
		姓名： {{name}}-{{age}}
	</view>
	<navigator url="/pages/demo5/demo5">跳转到demo5</navigator>
	<view>--------</view>
	<view>计数：{{count}}</view>
	<view>--------</view>
	<navigator url="/pages/demo4/demo4" open-type="reLaunch">跳转到demo4</navigator>
	<view v-for="item in 50">{{item}}</view>
	<view class="fixed" v-if="fiexd">👆</view>
</template>
<style lang="scss" scoped>
	.fixed {
		width: 20px;
		height: 25px;
		background-color: darkgrey;
		position: fixed;
		right: 30px;
		bottom: 30px;

	}
</style>